import React, {lazy} from "react";
import {Navigate, useRoutes} from 'react-router-dom'
import TabBottom from '../components/tabBottom/TabBottom'

const Main = lazy(() => import('../pages/main/Main'))
const Classify = lazy(() => import('../pages/classify/Classify'))
const Location = lazy(() => import('../pages/location/Location'))
const Shopping = lazy(() => import('../pages/shopping/Shopping'))
const My = lazy(() => import('../pages/my/My'))
const Detail = lazy(() => import('../pages/detail/Detail'))

export default function WrapRoute() {
  return useRoutes([
    {
      path: '/',
      exact: true,
      element: <Navigate to='/home'/>
    },
    {
      path: '/home',
      element: <TabBottom/>,
      children: [
        {
          path: '/home',
          exact: true,
          element: <Navigate to='/home/main'/>
        },
        {
          path: '/home/main',
          element: <Main/>
        },
        {
          path: '/home/classify',
          element: <Classify/>
        },
        {
          path: '/home/location',
          element: <Location/>
        },
        {
          path: '/home/shopping',
          element: <Shopping/>
        },
        {
          path: '/home/my',
          element: <My/>
        }
      ]
    },
    {
      path: '/detail/:id',
      element: <Detail/>
    }
  ])
}


